<template>
  <div class="bg-white rounded-xl p-6">
    <div class="flex justify-between">
      <div class="flex-grow">
        <div class="flex items-center flex-wrap gap-2">
          <p class="font-semibold text-gray-800">取件码: {{ parcel.trackingNumber }}</p>
          <span
            class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-700">
            已完成
          </span>
          <span class="text-xs text-gray-500">
            发布时间: {{ parcel.createdAt || "未知" }}
          </span>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
          <div>
            <p class="text-sm text-gray-500">收件人</p>
            <p class="font-medium text-gray-800">{{ parcel.receiver.name }} ({{ parcel.receiver.contact }})</p>
          </div>
          <div>
            <p class="text-sm text-gray-500">物品描述</p>
            <p class="font-medium text-gray-800">{{ parcel.description }}</p>
          </div>
          <div>
            <p class="text-sm text-gray-500">联系电话</p>
            <p class="font-medium text-gray-800">{{ parcel.phone }}</p>
          </div>
          <div>
            <p class="text-sm text-gray-500">
              {{ parcel.status === "已到达" ? "到达时间" : "预计到达" }}
            </p>
            <p class="font-medium text-gray-800">
              {{ parcel.arrivalTime || parcel.estimatedTime || "待送达" }}
            </p>
          </div>
          <div>
            <p class="text-sm text-gray-500">存放位置</p>
            <p class="font-medium text-gray-800">{{ parcel.location || "-" }}</p>
          </div>
          <div>
            <p class="text-sm text-gray-500">派送人</p>
            <p class="font-medium text-gray-800">{{ parcel.deliveryPerson }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ParcelDetail",
  props: {
    parcel: {
      type: Object,
      required: true
    }
  },
  methods: {
  }
};
</script>

<style scoped>
/* 可以添加组件特定的样式 */
</style>